<template>
  <el-container style="padding: 0;margin: 0" v-title>
    <e-vue-contextmenu ref="ctxshow" id="contextStyle">
      <el-menu @select="fileListMenuOperation">
        <div v-if="searchProperties.searchType !== 'be_delete'">
          <el-menu-item index="加星"
                        v-if="this.fileListRightMenuTarget.type !== 'dir' && !this.fileListRightMenuTarget.star">加星
          </el-menu-item>
          <el-menu-item index="取消加星" v-else-if="this.fileListRightMenuTarget.type !== 'dir'">取消加星</el-menu-item>
          <el-menu-item index="置顶"
                        v-if="this.fileListRightMenuTarget.type !== 'dir' && !this.fileListRightMenuTarget.top">置顶
          </el-menu-item>
          <el-menu-item index="取消置顶" v-else-if="this.fileListRightMenuTarget.type !== 'dir'">取消置顶</el-menu-item>
          <el-menu-item index="重命名">重命名</el-menu-item>
          <el-menu-item index="移动到">移动到</el-menu-item>
          <el-menu-item index="复制">复制</el-menu-item>
          <el-menu-item index="粘贴" v-if="copyFile !== '' && this.fileListRightMenuTarget.type === 'dir'">粘贴
          </el-menu-item>
          <el-menu-item index="删除">删除</el-menu-item>
          <el-menu-item index="导出为Word" v-show="this.fileListRightMenuTarget.type !== 'dir'">导出为Word</el-menu-item>
          <el-menu-item index="分享">分享</el-menu-item>
          <el-menu-item index="发送到云协作" v-show="this.fileListRightMenuTarget.type !== 'dir'">发送到云协作</el-menu-item>
          <el-menu-item index="复制引用链接" v-show="this.fileListRightMenuTarget.type !== 'dir'">复制引用链接</el-menu-item>
          <el-menu-item index="阅读密码">阅读密码</el-menu-item>
          <el-menu-item index="查看历史版本" v-show="this.fileListRightMenuTarget.type !== 'dir'">查看历史版本</el-menu-item>
        </div>
        <div v-else>
          <el-menu-item index="恢复">恢复</el-menu-item>
          <el-menu-item index="永久删除">永久删除</el-menu-item>
        </div>
      </el-menu>
    </e-vue-contextmenu>
    <el-header style="padding: 0;margin: 0; background-color: #398dee">
      <el-container>
        <el-main>
          <el-menu style="padding: 0;margin: 0" :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                   @select="handleSelect"
                   background-color="#398dee" text-color="#fff" active-text-color="#ffd04b" menu-trigger="click">
            <el-menu-item index="0" disabled
                          style="color: rgb(255, 255, 255); border-bottom-color: rgba(255, 255, 255, 0); background-color: rgb(255, 255, 255); opacity: 1">
              <i class="iconfont iconyoudaoyunbiji" style="color: #ffffff"/>
              盗亦有道云笔记
            </el-menu-item>
            <el-menu-item index="1" style="position: relative;left: 62px" title="云笔记">云笔记</el-menu-item>
            <el-menu-item index="2" style="position: relative;left: 62px" title="云协作" disabled>云协作</el-menu-item>
          </el-menu>
        </el-main>
        <el-aside class="myAside" style="display: flex;align-items: center;border-right: 0">
          <!--头像-->
          <el-row style="width: 100%; margin-right: 20px;align-items: center;display: flex" type="flex"
                  justify="space-around">
            <el-popover
              placement="right"
              width="400"
              trigger="click"
              popper-class="loginWindow">
              <login-register :host="this"></login-register>
              <el-button slot="reference" type="text">
                <el-avatar icon="iconfont iconyoudaoyunbiji" :src="personalInformation.head" title="头像"></el-avatar>
              </el-button>
            </el-popover>
            <el-dropdown @command="personalFunc" background-color="#ffffff" placement="bottom-start">
              <span><i class="el-icon-arrow-down el-icon--right" style="color: #ffffff;margin-right: 20px"/></span>
              <el-dropdown-menu>
                <el-dropdown-item command="个人信息">
                  <el-popover
                    placement="right"
                    width="400"
                    trigger="click"
                    popper-class="personalInformationWindow">
                    <personal-information ref="personalInfoPanel" :page="this"/>
                    <el-button slot="reference" type="text">个人信息</el-button>
                  </el-popover>
                </el-dropdown-item>
                <el-dropdown-item command="账号设置" divided>账号设置</el-dropdown-item>
                <el-dropdown-item command="导入笔记">导入笔记</el-dropdown-item>
                <el-dropdown-item command="官方贴吧" divided>官方贴吧</el-dropdown-item>
                <el-dropdown-item command="帮助">帮助</el-dropdown-item>
                <el-dropdown-item command="意见反馈">意见反馈</el-dropdown-item>
                <el-dropdown-item command="用户满意度调查">用户满意度调查</el-dropdown-item>
                <el-dropdown-item command="注销登录" divided>注销登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button class="subButton" type="text" @click="funcWillOpen">官网</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button class="subButton" type="text" @click="funcWillOpen">会员</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button class="subButton" type="text" @click="funcWillOpen">客户端下载</el-button>
          </el-row>
        </el-aside>
      </el-container>
    </el-header>
    <el-main style="padding: 0;margin: 0">
      <el-container class="myContainer">
        <div v-show="isMoving"
             style="z-index: 10001; position: absolute; height: 100%; width: 100%;
           display:flex;align-items: center;justify-content: center ;background-color: rgba(0, 0, 0, 0.4)">
          <div style="display: flex; align-items: self-start">
            <move-window :origin="movePath" :files="files" :page="this"></move-window>
            <span @click="isMoving = false" style="cursor: pointer; color: #e6e6e6" title="关闭">X</span>
          </div>
        </div>
        <el-aside class="myAside" width="220px">
          <el-container style="height: 100%">
            <el-header class="subHeader">
              <!--2-1-->
              <div class="subHeader">
                <!--新建-->
                <el-dropdown @command="newFileFunc" class="newFileDropdown" placement="bottom" trigger="click"
                             style="cursor: pointer">
              <span>
                <i class="iconfont iconjia" style="font-size: 20px; color: rgb(57, 141, 238);margin-right: 8px"/>
                <span class="primaryNewFileButton">新文档</span>
              </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="新建笔记">新建笔记</el-dropdown-item>
                    <el-dropdown-item command="新建Markdown">新建Markdown</el-dropdown-item>
                    <el-dropdown-item command="新建模板笔记">新建模板笔记</el-dropdown-item>
                    <el-dropdown-item command="新建脑图">新建脑图</el-dropdown-item>
                    <el-dropdown-item command="新建文件夹">新建文件夹</el-dropdown-item>
                    <el-dropdown-item command="导入Word" divided>
                      <el-upload action="" :before-upload="importWord" :show-file-list="false">
                        导入Word
                      </el-upload>
                    </el-dropdown-item>
                    <el-dropdown-item command="上传文件" divided>
                      <el-upload action="" :before-upload="uploadFile">
                        上传文件
                      </el-upload>
                    </el-dropdown-item>
                    <el-dropdown-item command="上传文件夹">
                      上传文件夹
                      <input type="file" style="display:none" v-show="false" webkitdirectory id="uploadFolderChannel"
                             ref="uploadFolderChannel" @change.stop="uploadFolder">
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-header>
            <el-main>
              <!--文件夹-->
              <el-row class="tac" style="border-left: 1px solid #e6e6e6;height: 100%">
                <el-scrollbar style="height: 100%">
                  <div style="height:100%;flex-direction: column; display: flex; align-items: center">
                    <el-menu ref="fileNav" id="fileNav" text-color="#000000" active-text-color="#ffffff"
                             style="border-right: 0;width:100%"
                             @open="handleOpen" @close="handleClose" @select="handleSelect">
                      <el-menu-item index="最新文档">
                        <div class="sign">
                          <i class="iconfont iconwendang"/>
                          <span>最新文档</span>
                        </div>
                      </el-menu-item>
                      <el-menu-item index="与我分享">
                        <div class="sign">
                          <i class="iconfont iconyaoqinghaoyou"/>
                          <span slot="title">与我分享</span>
                        </div>
                      </el-menu-item>
                      <my-tree :ch="files" :page="this"/>
                      <el-submenu index="标签">
                        <template class="sign" slot="title">
                          <div class="sign">
                            <i class="iconfont iconbiaoqian"/>
                            <span slot="title">标签</span>
                          </div>
                        </template>
                        <el-menu-item v-for="sign in allSigns" :key="sign" :index="sign">
                            <span class="sign">
                            {{sign}}
                            </span>
                        </el-menu-item>
                      </el-submenu>
                      <el-menu-item index="加星文件">
                        <div class="sign">
                          <i class="iconfont iconchangyongtubiao-xianxingdaochu-zhuanqu-"/>
                          <span slot="title">加星文件</span>
                        </div>
                      </el-menu-item>
                      <el-menu-item index="回收站">
                        <div class="sign">
                          <i class="iconfont iconhuishouzhan"/>
                          <span slot="title">回收站</span>
                          <el-dropdown placement="bottom-start" @command="trashOperate">
                              <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"/>
                              </span>
                            <el-dropdown-menu>
                              <el-dropdown-item command="清空回收站">清空回收站</el-dropdown-item>
                              <el-dropdown-item command="全部恢复">全部恢复</el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                        </div>
                      </el-menu-item>
                    </el-menu>
                  </div>
                </el-scrollbar>
              </el-row>
            </el-main>
          </el-container>
        </el-aside>
        <el-main>
          <el-container class="myContainer">
            <!--2-2-->
            <el-aside class="myAside" width="280px">
              <el-container style="height: 100%">
                <el-header
                  style="border-bottom: 1px solid #e6e6e6;padding: 0;justify-items: center;align-items: center;justify-content: space-around;display: flex">
                  <el-row>
                    <el-col :span="3" style="display: flex; justify-content: center">
                      <!--返回-->
                      <el-button id="returnTo" type="text" icon="iconfont iconshangyiye" title="返回"
                                 @click="returnToLastFolder" v-if="lastFolder !== ''"/>
                      <el-button type="text" icon="iconfont iconshangyiye" title="返回" style="color: #e6e6e6"
                                 v-else/>
                    </el-col>
                    <el-col :span="17" style="display: flex; justify-content: center">
                      <!--搜索-->
                      <el-input id="search" placeholder="搜索" v-model="keyWord" maxlength="10"
                                @keyup.enter.native="searchByKeyWord"/>
                    </el-col>
                    <!--筛选排序搜索-->
                    <el-col :span="4" style="display: flex; justify-content: center">
                      <el-dropdown @command="searchHelper" class="newFileDropdown" style="justify-content: flex-end">
                      <span class="el-dropdown-link">
                        <i class="iconfont iconweibiaoti15"/><i class="el-icon-arrow-down el-icon--right"/>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item command="摘要">摘要</el-dropdown-item>
                          <el-dropdown-item command="列表">列表</el-dropdown-item>
                          <el-dropdown-item command="创建时间" divided>创建时间
                            <span
                              v-if="this.searchProperties.orderBy === '创建时间' && !this.searchProperties.isDesc">↑</span>
                            <span
                              v-else-if="this.searchProperties.orderBy === '创建时间' && this.searchProperties.isDesc">↓</span>
                          </el-dropdown-item>
                          <el-dropdown-item command="修改时间">修改时间
                            <span
                              v-if="this.searchProperties.orderBy === '修改时间' && !this.searchProperties.isDesc">↑</span>
                            <span
                              v-else-if="this.searchProperties.orderBy === '修改时间' && this.searchProperties.isDesc">↓</span>
                          </el-dropdown-item>
                          <el-dropdown-item command="文件名称">文件名称
                            <span
                              v-if="this.searchProperties.orderBy === '文件名称' && !this.searchProperties.isDesc">↑</span>
                            <span
                              v-else-if="this.searchProperties.orderBy === '文件名称' && this.searchProperties.isDesc">↓</span>
                          </el-dropdown-item>
                          <el-dropdown-item command="文件大小">文件大小
                            <span
                              v-if="this.searchProperties.orderBy === '文件大小' && !this.searchProperties.isDesc">↑</span>
                            <span
                              v-else-if="this.searchProperties.orderBy === '文件大小' && this.searchProperties.isDesc">↓</span>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-header>
                <el-main style="height: 100%">
                  <el-scrollbar style="height: 100%">
                    <!--file button-->
                    <div style="height: 520px" v-show="this.searchProperties.type === '摘要'">
                      <div v-for="i in fileList.length" :key="i"
                           @contextmenu.stop.prevent="fileListRightClick($event, data, i - 1)"
                           style="border-bottom: solid 1px #e6e6e6;background-color: #ffffff"
                           @mouseenter="changeShowStarAndShareAndTrash(i - 1)"
                           @mouseleave="changeShowStarAndShareAndTrash(i - 1)">
                        <el-container style="margin: 15px 20px;cursor: pointer">
                          <el-header height="30px" style="padding: 0;display: flex; align-items: center">
                            <el-container style="display: flex; align-items: center">
                              <el-main style="height: 30px;display: flex; align-items: center">
                                <span class="icon iconfont" style="color: #ee9900;margin-right: 4px"
                                      v-if="fileList[i - 1].type === 'dir'">&#xe616;</span>
                                <i class="myFileInfo iconfont iconicon-markdown"
                                   style="color: #F78A09;margin-right: 4px"
                                   v-else-if="fileList[i - 1].type === 'md'"/>
                                <i class="myFileInfo iconfont iconbiji" style="color: #398dee;margin-right: 4px"
                                   v-else/>
                                <span class="myFileInfo" @click="openFile(i - 1)" v-if="!fileList[i - 1].isRenaming"
                                      style="white-space: nowrap;display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;">{{fileList[i - 1].name}}</span>
                                <el-input v-else v-model="fileList[i - 1].name" size="mini" autofocus
                                          @keypress.enter.native="renameFileList(i - 1)"/>
                              </el-main>
                              <el-aside width="40%"
                                        v-if="starAndShareAndTrash[i - 1] === true && !fileList[i - 1].isRenaming"
                                        style="display: flex;justify-content: space-around">
                                <el-button type="text"
                                           v-if="searchProperties.searchType !== 'be_delete' && fileList[i - 1].type !== 'dir' && !fileList[i - 1].star"
                                           @click="addStar(fileList[i - 1].path)">
                                  <i class="iconfont iconchangyongtubiao-xianxingdaochu-zhuanqu-"
                                     style="font-size: 22px" title="收藏"/>
                                </el-button>
                                <el-button type="text"
                                           v-if="searchProperties.searchType !== 'be_delete' && fileList[i - 1].type !== 'dir' && fileList[i - 1].star"
                                           @click="removeStar(fileList[i - 1].path)">
                                  <i class="iconfont iconchangyongtubiao-mianxing-"
                                     style="font-size: 22px;color: #FFD700" title="取消收藏"/>
                                </el-button>
                                <el-button type="text" @click="getShareLink(fileList[i - 1].path)"
                                           v-if="searchProperties.searchType !== 'be_delete'">
                                  <i class="iconfont iconfenxiang1" style="font-size: 22px" title="分享"/>
                                </el-button>
                                <el-button type="text" @click="renewFolderOrFile(fileList[i - 1].path)"
                                           v-if="searchProperties.searchType === 'be_delete'">
                                  <i class="iconfont iconfanhui" style="font-size: 15px;" title="恢复"/>
                                </el-button>
                                <el-button type="text" @click="deleteFileOrFolder(fileList[i - 1].path)"
                                           v-if="searchProperties.searchType !== 'be_delete'">
                                  <i class="iconfont iconhuishouzhan" style="font-size: 22px" title="删除"/>
                                </el-button>
                                <el-button type="text" @click="deleteFileOrFolderForever(fileList[i - 1].path)" v-else>
                                  <i class="iconfont iconhuishouzhan" style="font-size: 22px" title="永久删除"/>
                                </el-button>
                              </el-aside>
                              <el-aside width="40%"
                                        v-else-if="searchProperties.searchType !== 'be_delete' && fileList[i - 1].type !== 'dir' && (fileList[i - 1].top || fileList[i - 1].star) && !fileList[i - 1].isRenaming"
                                        style="display: flex; justify-content: flex-end; align-items: center">
                                <i class="iconfont iconchangyongtubiao-mianxing-" v-show="fileList[i - 1].star"
                                   style="font-size: 22px;color: #FFD700; margin-right: 10px"/>
                                <i class="iconfont iconzhiding" v-show="fileList[i - 1].top"
                                   style="color: #ff0000; margin-right: 10px"/>
                              </el-aside>
                            </el-container>
                          </el-header>
                          <el-main>
                            <el-container>
                              <el-aside
                                style="white-space: nowrap;display: inline-block;overflow: hidden;text-overflow: ellipsis;"
                                width="150px">
                              <span class="myFileInfo" @click="openFile(i - 1)"
                                    style="margin-top: 5px;margin-bottom: 5px;white-space: nowrap;display: inline-block;width: 220px;overflow: hidden;text-overflow: ellipsis;">
                                {{fileList[i - 1].summary}}
                              </span><br>
                                <span class="myFileInfo clock" @click="openFile(i - 1)" style="color: #c2c2c2">{{fileList[i - 1].date}}</span>
                                <span v-show="fileList[i - 1].type !== 'dir'" class="myFileInfo fileSize"
                                      @click="openFile(i - 1)" style="color: #c2c2c2">{{fileList[i - 1].size}}</span>
                              </el-aside>
                              <el-main v-if="fileList[i - 1].pict !== null && fileList[i - 1].pict !== undefined && fileList[i - 1].pict !== '' && searchProperties.searchType !== 'be_delete' && fileList[i - 1].type === 'txt'">
                                <el-image :src="fileList[i - 1].pict" style="width: 75px;height: 50px" fit="cover"/>
                              </el-main>
                            </el-container>
                          </el-main>
                        </el-container>
                      </div>
                    </div>
                    <div style="height: 520px" v-show="this.searchProperties.type === '列表'">
                      <div v-for="i in starAndShareAndTrash.length - 1" :key="i"
                           @contextmenu.stop.prevent="fileListRightClick($event, data, i - 1)"
                           style="border-bottom: solid 1px #e6e6e6;background-color: #ffffff;cursor: pointer"
                           @mouseenter="changeShowStarAndShareAndTrash(i - 1)"
                           @mouseleave="changeShowStarAndShareAndTrash(i - 1)">
                        <el-container
                          style="height: 30px;margin: 15px 20px;padding: 0;display: flex; align-items: center">
                          <el-main style="height: 30px;display: flex; align-items: center">
                                <span class="icon iconfont" style="color: #ee9900;margin-right: 4px"
                                      v-if="fileList[i - 1].type === 'dir'">&#xe616;</span>
                            <i class="myFileInfo iconfont iconicon-markdown"
                               style="color: #F78A09;margin-right: 4px" v-if="fileList[i - 1].type === 'md'"/>
                            <i class="myFileInfo iconfont iconbiji" style="color: #398dee;margin-right: 4px"
                               v-if="fileList[i - 1].type === 'note'"/>
                            <span @click="openFile(i - 1)" v-if="!fileList[i - 1].isRenaming"
                                  style="white-space: nowrap;display: inline-block;width: 100%;overflow: hidden;text-overflow: ellipsis;">
                              <span class="myFileInfo">{{fileList[i - 1].name}}</span>
                            </span>
                            <el-input v-else v-model="fileList[i - 1].name" size="mini" autofocus
                                      @keypress.enter.native="renameFileList(i - 1)"/>
                          </el-main>
                          <el-aside width="40%"
                                    style="display: flex;justify-content: space-around"
                                    v-if="starAndShareAndTrash[i - 1] === true && !fileList[i - 1].isRenaming">
                            <el-button type="text"
                                       v-if="fileList[i - 1].type !== 'dir' && !fileList[i - 1].star && searchProperties.searchType !== 'be_delete'"
                                       @click="addStar(fileList[i - 1].path)">
                              <i class="iconfont iconchangyongtubiao-xianxingdaochu-zhuanqu-" title="收藏"
                                 style="font-size: 22px"/>
                            </el-button>
                            <el-button type="text"
                                       v-if="fileList[i - 1].type !== 'dir' && fileList[i - 1].star && searchProperties.searchType !== 'be_delete'"
                                       @click="addStar(fileList[i - 1].path)">
                              <i class="iconfont iconchangyongtubiao-mianxing-" title="取消收藏"
                                 style="font-size: 22px; color: #FFD700"/>
                            </el-button>
                            <el-button type="text" @click="getShareLink(fileList[i - 1].path)"
                                       v-if="searchProperties.searchType !== 'be_delete'">
                              <i class="iconfont iconfenxiang1" style="font-size: 22px" title="分享"/>
                            </el-button>
                            <el-button type="text" @click="renewFolderOrFile(fileList[i - 1].path)"
                                       v-if="searchProperties.searchType === 'be_delete'">
                              <i class="iconfont iconfanhui" style="font-size: 15px;" title="恢复"/>
                            </el-button>
                            <el-button type="text" @click="deleteFileOrFolder(fileList[i - 1].path)">
                              <i class="iconfont iconhuishouzhan" style="font-size: 22px" title="回收站"/>
                            </el-button>
                          </el-aside>
                          <el-aside width="30%" v-else>
                            <span class="myFileInfo clock" style="color: #c2c2c2;">{{fileList[i - 1].date}}</span>
                          </el-aside>
                        </el-container>
                      </div>
                    </div>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </el-aside>
            <!--2-3-->
            <el-main>
              <el-container style="height: 100%">
                <el-header style="padding: 0; height: 60px; border-bottom: 1px solid #e6e6e6">
                  <!--title-->
                  <el-container style="height: 60px;border-right: solid 1px #e6e6e6;align-items: center;display: flex">
                    <el-main>
                      <el-input id="myTitle" type="text" placeholder="无标题文档" v-model="title"
                                style="width: 100%"/>
                    </el-main>
                    <el-aside class="myAside" width="460px"
                              style="border-right: 0;display: flex;align-items: center;justify-content: space-around">
                      <el-row justify="space-around" style="display: flex;justify-items: flex-end">
                        <el-button plain style="width: 100px;border: solid 1px #e6e6e6"
                                   @click="isMarkDown ? activeSaveMd() : saveFile()">
                          <span style="color: #398dee">
                            保存
                          </span>
                        </el-button>
                        <el-button type="text" @click="funcWillOpen">
                          <i class="iconfont iconfanyi buttonIcon" title="翻译"/>
                        </el-button>
                        <el-button type="text" @click="funcWillOpen">
                          <i class="iconfont iconfenxiang1 buttonIcon" title="分享"/>
                        </el-button>
                        <el-button type="text" @click="funcWillOpen">
                          <i class="iconfont iconbofang1 buttonIcon" title="演示模式"/>
                        </el-button>
                        <el-button type="text">
                          <el-popover
                            trigger="click">
                            <el-select
                              @change="addSignToFile"
                              v-model="signsOfFile"
                              multiple
                              filterable
                              allow-create
                              default-first-option
                              placeholder="请选择文章标签" value="">
                              <el-option
                                v-for="item in allSigns"
                                :key="item"
                                :label="item"
                                :value="item">
                              </el-option>
                            </el-select>
                            <i class="iconfont iconbiaoqian buttonIcon" slot="reference" title="标签"/>
                          </el-popover>
                        </el-button>
                        <el-dropdown trigger="click" @command="moreActionsForFile">
                          <el-button type="text">
                            <i class="iconfont iconxiaoxiguanli-quanbux buttonIcon" title="更多"/>
                          </el-button>
                          <el-dropdown-menu>
                            <el-dropdown-item command="加星" v-if="operatorFile === null || !operatorFile.star">加星
                            </el-dropdown-item>
                            <el-dropdown-item command="取消加星" v-else>取消加星</el-dropdown-item>
                            <el-dropdown-item command="置顶" v-if="operatorFile === null || !operatorFile.top">置顶
                            </el-dropdown-item>
                            <el-dropdown-item command="取消置顶" v-else>取消置顶</el-dropdown-item>
                            <el-dropdown-item command="阅读密码">阅读密码</el-dropdown-item>
                            <el-dropdown-item command="查看历史版本">查看历史版本</el-dropdown-item>
                            <el-dropdown-item command="移动到">移动到</el-dropdown-item>
                            <el-dropdown-item command="导出为Word" v-if="!isMarkDown">导出为Word</el-dropdown-item>
                            <el-dropdown-item command="导出为PDF" v-else>导出为PDF</el-dropdown-item>
                            <el-dropdown-item command="打印">打印</el-dropdown-item>
                            <el-dropdown-item command="删除">删除</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                        <el-popover
                          placement="bottom-end"
                          width="300"
                          trigger="click">
                          <el-form label-width="80px" :label-position="'left'" style="padding: 10px">
                            <el-form-item label="作者">
                              <el-input class="miniInput" v-model="operatorFile.author"
                                        v-on:blur="editFileInfo"/>
                            </el-form-item>
                            <el-form-item label="来源">
                              <el-input class="miniInput" v-model="operatorFile.origin"
                                        v-on:blur="editFileInfo"/>
                            </el-form-item>
                            <el-form-item label="创建时间"><span>{{operatorFile.createTime}}</span></el-form-item>
                            <el-form-item label="修改时间"><span>{{operatorFile.editTime}}</span></el-form-item>
                            <el-form-item label="文件夹"><span>{{operatorFile.folder}}</span></el-form-item>
                          </el-form>
                          <el-button slot="reference" type="text">
                            <i class="iconfont iconi1 buttonIcon" title="文件信息"/>
                          </el-button>
                        </el-popover>
                      </el-row>
                    </el-aside>
                  </el-container>
                </el-header>
                <!--markdown-->
                <el-main id="markdownPart" style="padding: 0;height: 100%">
                  <quill-editor v-model="content"
                                :options="editorOption"
                                v-if="!isMarkDown"
                                @blur="onEditorBlur($event)"
                                @focus="onEditorFocus($event)"
                                @change="onEditorChange($event)">
                  </quill-editor>
                  <mark-down ref="md" v-else style="height: 100%" :toolbars="markDownConfig"
                             @on-save="saveMdContent" :initialValue="content" :autoSave="false"/>
                </el-main>
              </el-container>
            </el-main>
          </el-container>
        </el-main>
      </el-container>
    </el-main>
    <input type="file" id="btn_file" style="display:none">
  </el-container>
</template>
<script>
  import LoginRegister from "./LoginRegister";
  import MarkDown from 'vue-meditor';
  import MoveWindow from "./MoveWindow";

  // const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'],
  // ['blockquote', 'code-block'], [{'header': 1}, {'header': 2}],
  //     [{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}],
  //     [{'indent': '-1'}, {'indent': '+1'}],
  //     [{'direction': 'rtl'}],
  //     [{'size': ['small', false, 'large', 'huge']}],
  //     [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background': []}],
  //     [{'font': []}], [{'align': []}], ['link', 'image', 'upload'], ['clean']
  // ];

  export default {
    components: {MoveWindow, LoginRegister, MarkDown},
    data() {
      return {
        //用户信息
        personalInformation: {
          username: "",
          head: "",
          nickname: "",
          province: "",
          city: "",
          introduction: "",
          sex: ""
        },
        // markDown编辑器配置参数
        markDownConfig: {
          h4: true,
          h5: true,
          h6: true
        },
        // 是否开启markDown编辑器，否则开启富文本编辑器
        isMarkDown: true,
        // 搜索参数
        searchProperties: {
          // 搜索结果类型
          type: "摘要",
          // 是否降序
          isDesc: true,
          // 按照什么排序
          orderBy: "创建时间",
          // 搜索类型：be_new/be_star/be_share/be_delete
          searchType: 'folder'
        },
        // 文件树下文件
        files: [{
          // 文件/夹名
          name: "我的文件夹",
          // 文件/夹路径
          path: "",
          // 文件节点编号
          id: "0",
          // 文件类型
          type: "folder",
          // 父节点路径
          parent: undefined,
          // 孩子节点
          childNodes: [],
          /*
          [
              {
                  name: "文件夹1",
                  id: "0-1",
                  type: "folder",
                  childNodes: [
                      {
                          name: "文件夹1",
                          id: "0-1-1",
                          type: "folder",
                          childNodes: []
                      },
                      {
                          name: "文件夹2",
                          id: "0-1-2",
                          type: "folder",
                          childNodes: [
                              {
                                  name: "文件夹3",
                                  id: "0-1-2-1",
                                  type: "folder",
                                  star: true,
                                  childNodes: null
                              },
                              {
                                  name: "文件1",
                                  id: "0-1-2-2",
                                  type: "file",
                                  star: false,
                                  childNodes: null
                              }
                          ]
                      },
                      {
                          name: "文件2",
                          id: '0-1-3',
                          type: "file",
                          star: false,
                          childNodes: null
                      }
                  ]
              },
              {
                  name: "文件夹2",
                  id: "0-2",
                  type: "folder",
                  childNodes: [
                      {
                          name: "文件夹3",
                          id: "0-2-1",
                          type: "folder",
                          childNodes: null
                      },
                      {
                          name: "文件1",
                          id: "0-2-2",
                          type: "file",
                          childNodes: null
                      }
                  ]
              },
              {
                  name: "文件2",
                  id: "0-3",
                  type: "file",
                  childNodes: null
              },
              {
                  name: "文件3",
                  id: "0-4",
                  type: "file",
                  childNodes: null
              }
          ]
          */
        }],
        // 是否处于移动状态
        isMoving: false,
        // 移动的文件或文件夹的路径
        movePath: "",
        folderOpens: [],
        // 文件编辑器内容
        content: '',
        // 编辑选项
        editorOption: {},
        // 操作文件夹
        operateFolder: '我的文件夹/',
        // 操作文件夹的上层文件夹
        lastFolder: '',
        // 操作文件
        operatorFile: {
          path: '',
          star: false,
          top: true,
          author: "",
          origin: "",
          createTime: "2019/03/22 18:00",
          editTime: "2019/03/22 18:00",
          folder: "新建文件夹"
        },
        // 搜索的标签名
        signName: '',
        // 激活索引
        activeIndex: '1',
        // 搜索关键字
        keyWord: '',
        // 文件标题
        title: '',
        // 文件小图标按钮是否点亮
        starAndShareAndTrash: [false, false, false, false, false],
        // 右键菜单对象
        fileListRightMenuTarget: {
          isRenaming: false
        },
        // 搜索结果文件列表
        fileList: [
          {
            name: "新建文件夹",
            path: '/',
            type: "dir",
            summary: "摘要摘要摘要摘",
            date: "2019-01-01",
            star: true,
            top: false,
            size: "1008B",
            pict: ""
          },
          {
            name: "新建MarkDown",
            path: '/',
            type: "md",
            summary: "md摘要摘要摘",
            date: "2019-01-02",
            star: false,
            top: true,
            size: "1108B",
            pict: ""
          },
          {
            name: "新建笔记",
            path: '/',
            type: "note",
            summary: "笔记摘要",
            date: "2019-01-03",
            star: true,
            top: false,
            size: "1008KB",
            pict: ""
          },
          {
            name: "新建文件夹",
            path: '/',
            type: "dir",
            summary: "摘要摘要摘要摘",
            date: "2019-01-01",
            star: false,
            top: false,
            size: "1008B",
            pict: ""
          },
        ],
        // 文章标签
        signsOfFile: [1, 2, 3, 4, 5],
        // 现有的所有标签
        allSigns: [],
        // 文件的旧标签
        oldSigns: [],
        // 复制的文件
        copyFile: ''
      };
    },
    methods: {

      /**
       * 获取分享链接
       * @param target 目标路径
       */
      getShareLink(target) {
        this.apis.getShareLink(target, res => {
          console.log(res);
          navigator.clipboard.writeText(res);
          this.showMessage('文件分享链接已粘贴入剪贴板，快去分享吧！');
        });
      },

      /**
       * 编辑文件信息
       */
      editFileInfo() {
        this.apis.editFile(this.operatorFile, res => {
        })
      },

      /**
       * 回收站操作
       */
      trashOperate(command) {
        if (command === '全部恢复') {
          this.apis.renewFolder("", res => {
            this.showMessage(res);
            this.search();
          });
        } else {
          this.deleteFileOrFolderForever('');
        }
      },

      /**
       * 恢复文件或文件夹
       */
      renewFolderOrFile(target) {
        this.apis.renewFolder(target, res => {
          this.showMessage(res);
          this.updateFileTree();
        })
      },

      /**
       * 转移到上个文件夹
       */
      returnToLastFolder() {
        this.operateFolder = this.lastFolder;
        this.searchProperties.searchType = 'folder';
        this.search();
      },

      /**
       * 文件菜单右击
       */
      fileListRightClick($event, data, index) {
        this.$refs.ctxshow.showMenu($event, data);
        this.fileListRightMenuTarget = this.fileList[index];
        console.log(this.fileListRightMenuTarget);
      },

      /**
       * 文件列表右键菜单操作
       */
      fileListMenuOperation(key, keyPath) {
        console.log(key);
        this.$refs['ctxshow'].hideMenu();
        switch (key) {
          // 普通case
          case "重命名":
            this.fileListRightMenuTarget.isRenaming = true;
            break;
          case "移动到":
            this.movePath = this.fileListRightMenuTarget.path;
            this.isMoving = true;
            break;
          case "复制":
            this.copyFile = this.fileListRightMenuTarget.path;
            break;
          case "粘贴":
            this.pasteFile(this.fileListRightMenuTarget.path);
            break;
          case "删除":
            this.deleteFileOrFolder(this.fileListRightMenuTarget.path);
            break;
          case "分享":
            this.getShareLink(this.fileListRightMenuTarget.path);
            break;
          case "阅读密码":
            this.funcWillOpen();
            break;
          case "加星":
            this.addStar(this.fileListRightMenuTarget.path);
            break;
          case "取消加星":
            this.removeStar(this.fileListRightMenuTarget.path);
            break;
          case "置顶":
            this.top(this.fileListRightMenuTarget.path);
            break;
          case "取消置顶":
            this.removeTop(this.fileListRightMenuTarget.path);
            break;
          case "导出为Word":
            break;
          case "发送到云协作":
            this.funcWillOpen();
            break;
          case "复制引用链接":
            this.funcWillOpen();
            break;
          case "查看历史版本":
            this.funcWillOpen();
            break;
          // 回收站case
          case "恢复":
            this.renewFolderOrFile(this.fileListRightMenuTarget.path);
            break;
          case "永久删除":
            this.deleteFileOrFolderForever(this.fileListRightMenuTarget.path);
            break;
        }
      },

      /**
       * 重命名文件列表中的文件
       */
      renameFileList(index) {
        let oldPath = "";
        let newPath = "";
        let folder = "";
        let path = this.fileList[index].path.split("/");
        this.fileList[index].isRenaming = false;
        for (let i = 0; i < path.length - 1; i++) {
          folder += path[i];
          folder += "/";
        }

        // 非文件夹需要取出文件类型
        if (this.fileList[index].type !== 'dir') {
          path = path[path.length - 1].split('.');
          newPath = folder + this.fileList[index].name + "." + path[path.length - 1];
        } else
          newPath = folder + this.fileList[index].name;
        oldPath = this.fileList[index].path;
        console.log(oldPath);
        console.log(newPath);
        this.apis.renameFileOrFolder(oldPath, newPath, res => {
          this.showMessage(res);
          this.search();
        });
      },

      /**
       * 上传文件
       * @param file 目标文件
       */
      uploadFile(file) {
        this.apis.uploadFile(this.operateFolder, file, res => {
          this.showMessage(res);
          this.updateFileTree();
        });
      },

      /**
       * 上传文件夹
       */
      uploadFolder() {
        console.log(this.$refs['uploadFolderChannel'].files);
        this.apis.uploadFolder(this.operateFolder, this.$refs['uploadFolderChannel'].files, res => {
          this.showMessage(res);
          this.updateFileTree();
        });
      },

      /**
       * 导入Word
       * @param file 目标文件
       */
      importWord(file) {
        this.apis.importWord(this.operateFolder, file, res => {
          this.showMessage(res);
          this.updateFileTree();
        });
      },

      /**
       * 搜索
       */
      search() {
        this.starAndShareAndTrash = [];
        let config = this.searchProperties.searchType;
        let dict = {};
        if (this.searchProperties.searchType === 'folder') {
          dict['filePath'] = this.operateFolder;
          console.log(this.operateFolder);
          let tmp = this.operateFolder.split('/');
          this.lastFolder = '';
          for (let i = 0; i < tmp.length - 1; i++) {
            this.lastFolder += tmp[i];
            this.lastFolder += (i !== tmp.length - 2 ? '/' : '');
          }
          this.apis.searchFilesByPath(this.searchProperties.orderBy, !this.searchProperties.isDesc, this.keyWord, dict, this.dealFileResWithFolder);
          return;
        } else if (this.searchProperties.searchType === 'sign') {
          dict['signName'] = this.signName;
        } else
          dict[config] = true;
        this.apis.searchFiles(this.searchProperties.orderBy, !this.searchProperties.isDesc, this.keyWord, dict, config === 'be_delete' ? this.dealFileResWithFolder : res => {
          let tmp = [];
          let starTopTrash = [];
          for (let i = 0; i < res.length; i++) {
            let temp = {};
            temp.name = res[i].title;
            temp.path = res[i].path;
            temp.type = res[i].path.split('.')[res[i].path.split('.').length - 1];
            temp.summary = res[i].summary;
            temp.date = res[i].createDatetime.split(" ")[0];
            temp.star = res[i].beStar;
            temp.top = res[i].beTop;
            temp.size = res[i].size + 'B';
            temp.isRenaming = false;
            temp.pict = res[i].picturePath1;
            tmp.push(temp);
            starTopTrash.push(false);
          }
          this.fileList = tmp;
          starTopTrash.push(false);
          this.starAndShareAndTrash = starTopTrash;
        });
        this.lastFolder = '';
      },

      dealFileResWithFolder(res) {
        let tmp = [];
        let starTopTrash = [];
        // 文件夹
        for (let i = 0; i < res[0].length; i++) {
          let temp = {};
          temp.name = res[0][i].path.split('/')[res[0][i].path.split('/').length - 1];
          temp.path = res[0][i].path;
          temp.type = 'dir';
          temp.summary = res[0][i].summary;
          temp.date = res[0][i].createDatetime.split(" ")[0];
          temp.star = res[0][i].beStar;
          temp.top = res[0][i].beTop;
          temp.size = res[0][i].size + 'B';
          temp.isRenaming = false;
          tmp.push(temp);
          starTopTrash.push(false);
        }
        // 文件
        for (let i = 0; i < res[1].length; i++) {
          let temp = {};
          temp.name = res[1][i].title;
          temp.path = res[1][i].path;
          temp.type = res[1][i].path.split('.')[res[1][i].path.split('.').length - 1];
          console.log(temp.type);
          temp.summary = res[1][i].summary;
          temp.date = res[1][i].createDatetime.split(" ")[0];
          temp.star = res[1][i].beStar;
          temp.top = res[1][i].beTop;
          temp.size = res[1][i].size + 'B';
          temp.isRenaming = false;
          temp.pict = res[1][i].picturePath1;
          tmp.push(temp);
          starTopTrash.push(false);
        }
        this.fileList = tmp;
        starTopTrash.push(false);
        this.starAndShareAndTrash = starTopTrash;
      },

      /**
       * 根据关键词搜索
       */
      searchByKeyWord() {
        console.log([this.searchProperties.orderBy, this.searchProperties.isDesc, this.keyWord, this.operateFolder]);
        this.search();
      },

      /**
       * 文件的更多操作
       */
      moreActionsForFile(command) {
        switch (command) {
          case "加星":
            this.addStar(this.operatorFile.path);
            break;
          case "取消加星":
            this.removeStar(this.operatorFile.path);
            break;
          case "置顶":
            this.top(this.operatorFile.path);
            break;
          case "取消置顶":
            this.removeTop(this.operatorFile.path);
            break;
          case "导出为Word":
            this.apis.exportWord(this.operatorFile.path, res => {
              console.log(res);
              window.open(res);
            });
            break;
          case "导出为PDF":
            this.apis.exportPDF(this.operatorFile.path, res => {
              console.log(res);
              window.open(res);
            });
            break;
          case "删除":
            this.deleteFileOrFolder(this.operatorFile.path);
            this.clearFileWindow(this.isMarkDown);
            break;
          default:
            this.funcWillOpen();
        }
      },

      /**
       * 粘贴文件
       */
      pasteFile(target) {
        this.apis.pasteFile(this.copyFile, target, res => {
          this.showMessage(res);
        })
      },

      /**
       * 加星
       */
      addStar(target) {
        console.log(target);
        this.apis.fileAddStar(target, res => {
          this.showMessage(res);
          this.search();
          this.operatorFile.star = true;
        });
      },

      /**
       * 取消加星
       */
      removeStar(target) {
        console.log(target);
        this.apis.fileCancelStar(target, res => {
          this.showMessage(res);
          this.search();
          this.operatorFile.star = false;
        });
      },

      /**
       * 置顶
       */
      top(target) {
        this.apis.fileAddTop(target, res => {
          this.showMessage(res);
          this.search();
          this.operatorFile.top = true;
        });
      },

      /**
       * 取消置顶
       */
      removeTop(target) {
        this.apis.fileCancelTop(target, res => {
          this.showMessage(res);
          this.search();
          this.operatorFile.top = false;
        });
      },

      /**
       * 删除目标文件夹或目标文件
       */
      deleteFileOrFolder(target) {
        this.apis.deleteFolderOrFile(target, res => {
          this.showMessage(res);
          this.search();
          this.updateFileTree();
        });
      },

      /**
       * 永久删除目标
       * @param target 目标路径
       */
      deleteFileOrFolderForever(target) {
        this.$confirm('此操作将永久删除' + (target === '' ? '所有' : '') + '文件，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.apis.deleteFolderForever(target, res => {
            this.showMessage(res);
            this.search();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      /**
       * 更新文件列表
       */
      updateFileList() {
        console.log("update fileList");
      },

      /**
       * 更新文件树
       */
      updateFileTree() {
        this.apis.getFolders(res => {
          let queue = [];
          queue.unshift(res);
          while (queue.length > 0) {
            let tmp = queue.shift();
            tmp.path = tmp.name;
            tmp.id = tmp.path;
            tmp.isRenaming = false;
            console.log(tmp.id);
            let subStrings = tmp.name.split("/");
            tmp.name = subStrings[subStrings.length - 1].split(".")[0];
            tmp.isBuildFolder = false;
            if (tmp.dir === true)
              tmp.type = 'folder';
            else {
              let subStrings = tmp.name.split('.');
              tmp.type = subStrings[subStrings.length - 1];
            }
            if (tmp.childNodes !== null)
              for (let i = 0; i < tmp.childNodes.length; i++) {
                tmp.childNodes[i].parent = tmp.path;
                queue.unshift(tmp.childNodes[i]);
              }
          }
          res.name = "我的文件夹";
          this.files = [res];
          this.search();
        });
      },

      /**
       * 清空文件窗口
       */
      clearFileWindow(isMarkDown) {
        this.operatorFile.path = null;
        this.content = null;
        this.title = null;
        if (this.isMarkDown === isMarkDown)
          return;
        this.isMarkDown = isMarkDown;
        this.title = null;
      },

      /**
       * 激活md工具保存方法
       */
      activeSaveMd() {
        this.$refs.md.handleSave();
      },

      /**
       * 将base64转换为文件
       * @param data 文件流
       * @param filename 文件名
       */
      base64toFile(data, filename) {
        let arr = data.split(','),
          mime = arr[0].match(/:(.*?);/)[1],
          base64Str = atob(arr[1]),
          n = base64Str.length,
          u8arr = new Uint8Array(n);
        while (n--)
          u8arr[n] = base64Str.charCodeAt(n);
        return new File([u8arr], filename, {type: mime});
      },

      /**
       * 删除文件标签
       * @param sign 标签名
       */
      removeSignOfFile(sign) {
        console.log(sign);
        this.apis.delSignFile(this.operatorFile.path, sign, res => {
          this.showMessage(res);
          this.getSignsOfFile();
          this.getAllSigns();
          this.getFileSign();
        });
      },

      /**
       * 为文件新建标签
       * @param sign 标签名
       */
      addSignToFile(sign) {
        for (let i = 0; i < sign.length; i++) {
          if (this.oldSigns.indexOf(sign[i]) !== -1)
            continue;
          console.log(sign);
          console.log(this.oldSigns);
          this.apis.addSignToFile(this.operatorFile.path, sign[i], res => {
            this.showMessage(res);
            this.getSignsOfFile();
            this.getAllSigns();
            this.getFileSign();
          });
        }
        for (let i = 0; i < this.oldSigns.length; i++) {
          if (sign.indexOf(this.oldSigns[i]) !== -1)
            continue;
          this.removeSignOfFile(this.oldSigns[i]);
        }
      },

      /**
       * 获取文件的所有标签
       */
      getSignsOfFile() {
        this.apis.getFileSign(this.operatorFile.path, res => {
          this.signsOfFile = res;
          this.oldSigns = res;
        });
      },

      /**
       * 保存md内容
       * @param content 文本内容
       */
      saveMdContent(content) {
        if (this.title === "" || this.title === undefined || this.title === null) {
          this.showMessage("标题不得为空", "error");
          return;
        }
        this.content = content.value;
        // md保存
        let file = new File([this.content], "title", {});
        this.apis.saveNote(file, this.operateFolder + "/" + this.title + ".md", this.title + ".md", [], '',
          res => {
            this.showMessage(res);
            this.updateFileTree();
            this.clearFileWindow(true);
          }
        )
      },

      /**
       * 保存文件
       */
      saveFile() {
        if (this.title === "" || this.title === undefined || this.title === null) {
          this.showMessage("标题不得为空", "error");
          return;
        }
        // 富文本保存
        // 获取富文本中的img标签
        let doc = document.createElement("div");
        doc.innerHTML = this.content;
        let images = doc.getElementsByTagName("img");

        // 将img标签组中src属性值（base64）转为文件列表，只取前三个
        let pictures = [];
        for (let i = 0; i < Math.min(images.length, 3); i++)
          pictures.push(this.base64toFile(images[i].currentSrc, this.title + i + ".jpg"));

        // 取概要
        let summary = doc.getElementsByTagName("p")[0].innerText;

        let file = new File([this.content], "title", {});
        // todo 保存笔记的逻辑需要修改
        this.apis.saveNote(file, this.operateFolder + "/" + this.title + ".txt", this.title + ".txt", pictures, summary,
          res => {
            this.showMessage(res);
            this.updateFileTree();
            this.search();
          }
        );
      },

      /**
       * 打开文件
       */
      openFile(index) {
        if (this.searchProperties.searchType === 'be_delete') {
          // todo 回收站下的打开文件方法
          console.log("回收站下的打开文件方法");
          return;
        }
        this.operatorFile = this.fileList[index];
        if (this.fileList[index].type !== 'dir')
          this.readFile(this.fileList[index].path, this.fileList[index].name);
        else {
          this.operateFolder = this.fileList[index].path;
          this.searchProperties.searchType = 'folder';
          this.search();
        }
      },

      searchHelper(command) {
        switch (command) {
          case "摘要":
            this.searchProperties.type = command;
            console.log(this.searchProperties.type);
            break;
          case "列表":
            this.searchProperties.type = command;
            console.log(this.searchProperties.type);
            break;
          default:
            if (this.searchProperties.orderBy === command)
              this.searchProperties.isDesc = !this.searchProperties.isDesc;
            else {
              this.searchProperties.orderBy = command;
              this.searchProperties.isDesc = true;
            }
            this.search();
            break;
        }
      },

      /**
       * 创建文件相关操作（头像下拉）
       * @param command
       */
      newFileFunc(command) {
        switch (command) {
          case "新建笔记":
            this.clearFileWindow(false);
            break;
          case "新建Markdown":
            this.clearFileWindow(true);
            break;
          case "新建模板笔记" :
            this.funcWillOpen();
            break;
          case "新建脑图":
            this.funcWillOpen();
            break;
          case "新建文件夹":
            break;
          case "导入Word":
            break;
          case "上传文件":
            break;
          case "上传文件夹":
            document.getElementById("uploadFolderChannel").click();
            break;
        }
      },

      /**
       * 个人相关操作（头像下拉）
       * @param command
       */
      personalFunc(command) {
        switch (command) {
          case "个人信息":
            break;
          case "账号设置":
            break;
          case "导入笔记":
            break;
          case "帮助":
            break;
          case "意见反馈":
            break;
          case "注销登录":
            this.apis.logout(res => {
              this.showMessage(res);
            });
            break;
          default:
            this.funcWillOpen();
        }
      },
      funcWillOpen() {
        this.apis.willOpen();
      },
      onEditorBlur(editor) {//失去焦点事件
      },
      onEditorFocus(editor) {//获得焦点事件
      },
      onEditorChange({editor, html, text}) {//编辑器文本发生变化
        //this.content可以实时获取到当前编辑器内的文本内容
        console.log(this.content);
      },

      changeShowStarAndShareAndTrash(i) {
        this.$set(this.starAndShareAndTrash, i, !this.starAndShareAndTrash[i]);
      },

      /**
       * 读取文件
       * @param path 路径
       * @param title 标题
       */
      readFile(path, title) {
        this.clearFileWindow(false);
        this.clearFileWindow(true);
        let key = path;
        // 读取文件类型
        let tmp = key.split(".");
        this.operateFolder = key.substr(0, key.lastIndexOf("/"));
        this.isMarkDown = tmp[tmp.length - 1] === 'md';
        // 读取文件名
        this.title = title;
        // 修改操作文件
        this.operatorFile.path = key;

        // 获取文件信息
        this.apis.getFileInfo(key, res => {
          this.$set(this.operatorFile, "author", res.author.toString());
          this.$set(this.operatorFile, "origin", res.origin.toString());
          this.operatorFile.createTime = res.createDateTime;
          this.operatorFile.editTime = res.lastUpdateDatetime;
          this.operatorFile.folder = res.folder;
        });

        // 获取文件路径
        this.apis.getFilePath(key, res => {
          console.log(res);
          this.$axios.get(res).then(
            res => {
              // 获取文件内容
              this.content = res.data;
              // 获取文件标签
              this.apis.getFileSign(key, res => {
                this.signsOfFile = res;
                this.oldSigns = res;
              });
            }
          )
        });
      },

      handleSelect(key, keyPath) {
        switch (key) {
          case "最新文档":
            this.searchProperties.searchType = 'be_new';
            this.search();
            break;
          case "与我分享":
            this.funcWillOpen();
            break;
          case "标签":
            break;
          case "加星文件":
            this.searchProperties.searchType = 'be_star';
            this.search();
            break;
          case "回收站":
            this.searchProperties.searchType = 'be_delete';
            this.search();
            break;
          default:
            this.signName = key;
            this.searchProperties.searchType = 'sign';
            this.search();
        }
      },
      handleOpen(key, keyPath) {
        if (key === '标签')
          this.handleSelect(key, keyPath);
        console.log('handleOpen');
        this.searchProperties.searchType = 'folder';
        this.operateFolder = key;
        this.search();
      },
      handleClose(key, keyPath) {
        if (key === '标签')
          this.handleSelect(key, keyPath);
        console.log('handleClose');
        this.operateFolder = key;
        this.searchProperties.searchType = 'folder';
        this.search();
      },

      // axios
      login(username, password) {
        this.$axios.get('http://47.101.180.43/user/login', {
          data: {
            username: username,
            password: password
          }
        });
      },

      getPersonalInformation() {
        this.apis.getPersonalInformation(res => {
          this.$refs['personalInfoPanel'].username = res.username;
          this.$refs['personalInfoPanel'].username = res.username;
          this.$refs['personalInfoPanel'].head = res.picture;
          this.$refs['personalInfoPanel'].nickname = res.nickname;
          this.$refs['personalInfoPanel'].province = res.province;
          this.$refs['personalInfoPanel'].city = res.city;
          this.$refs['personalInfoPanel'].introduction = res.introduction;
          this.$refs['personalInfoPanel'].sex = res.sex;
        });
      },

      /**
       * 获取所有标签
       */
      getAllSigns() {
        this.apis.getAllSign(res => {
          let tmp = [];
          for (let i = 0; i < res.length; i++)
            tmp.push(res[i].name);
          this.allSigns = tmp;
        });
      }
    },
    updated() {
      //修改markdown高度
      let i = document.documentElement.clientHeight - 122;
      if (document.getElementsByClassName("ql-container ql-snow")[0] !== undefined)
        document.getElementsByClassName("ql-container ql-snow")[0].style.height = i - 65 + "px";
      // 修改container容器高度
      let containers = document.getElementsByClassName("myContainer");
      for (let i = 0; i < containers.length; i++) {
        document.getElementsByClassName("myContainer")[i].style.height = document.documentElement.clientHeight - 62 + "px";
      }
    },
    mounted() {
      //修改markdown高度
      let i = document.documentElement.clientHeight - 122;
      if (document.getElementsByClassName("ql-container ql-snow")[0] !== undefined)
        document.getElementsByClassName("ql-container ql-snow")[0].style.height = i - 65 + "px";
      // 修改container容器高度
      let containers = document.getElementsByClassName("myContainer");
      for (let i = 0; i < containers.length; i++)
        document.getElementsByClassName("myContainer")[i].style.height = document.documentElement.clientHeight - 62 + "px";
    }
  }
</script>
<style>

  .personalInformationWindow {
    height: 400px;
    width: 400px;
  }

  .ql-editor {
    height: 100%;
  }

  .ql-toolbar.ql-snow {
    border-left: 0;
    border-bottom-color: #e6e6e6;
  }

  .ql-container.ql-snow {
    border-top: 0;
    border-left: 0;
    border-right-color: #e6e6e6;
    border-bottom-color: #e6e6e6;
  }

  .ql-toolbar.ql-snow, .ql-container.ql-snow {
    border-right: 1px solid #e6e6e6;
  }

  .myAside {
    border-right: 1px solid #e6e6e6;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-select-dropdown__wrap {
    overflow-x: scroll;
  }

  .ql-editor, .ql-editor.ql-blank, .ql-toolbar.ql-snow {
    border-top-width: 0;
    border-left-color: #e6e6e6;
  }

  .ql-editor, .ql-editor.ql-blank {
    height: 100%;
  }

  .myFileInfo {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    font-size: 12px;
    color: #393939;
  }

  .buttonIcon {
    margin-left: 20px;
    font-size: x-large;
  }

  .el-dropdown-menu.el-popper {
    position: absolute;
    left: 80px;
  }

  .sign {
    white-space: nowrap;
    display: inline-block;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 20px;
  }

  .el-menu-item.is-active {
    background-color: rgb(57, 141, 238);
  }

  .html {
    display: contents;
  }

  body {
    margin: 0;
  }

  .newFileDropdown {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-menu {
    position: relative;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
  }

  #fileNav.el-menu {
    height: 100%;
  }

  .el-col-12 {
    width: 100%;
  }

  #operateSelect.el-input__inner {
    border: 0;
  }

  #myTitle.el-input__inner {
    border: 0;
    font-size: x-large;
    height: 58px;
  }

  #province.el-input__inner {
    width: 100%;
  }

  #city.el-input__inner {
    width: 100%;
  }

  #searchTypeSelect.el-input__inner {
    border: 0;
  }

  #operateSelect::placeholder {
    color: #000000;
  }

  .el-input__prefix {
    left: 10px;
  }

  #search.el-input {
    width: 50%;
  }

  #search.el-input__inner {
    border-radius: 40px;
  }

  .el-button {
    border: 0;
  }

  .subHeader {
    border-bottom: solid 1px #e6e6e6;
  }

  .subButton {
    color: #ffffff;
  }

  .el-submenu__icon-arrow.el-icon-arrow-down:before {
    opacity: 0;
  }

  .el-main {
    padding: 0;
  }

  .loginWindow {
    height: 300px;
    width: 400px;
  }

  .primaryNewFileButton:hover {
    color: #398dee;
  }

</style>
